<template>
  <div class="Calculationbox">
    <div class="topdox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="光伏系统">
                  <FilterSelect2
                      v-model="companyId"
                      :optionlist="xitonglist"
                      @updateModelValue="changexitong"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="日期">
                  <el-date-picker  v-model="value1" type="monthrange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM" size="small">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="14" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button size="small" type="primary" @click="gettablelist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="title">
        <div>光伏结算单</div>
        <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
      </div>
      <div class="table">
        <el-table
        :size="issize"
        border
        :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
        v-loading="loading"
        height="calc(100% - 1px)"
          style="width: 100%"
          :data="tableData">
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column
            align="center"
            label="序号"
            fixed
            type="index"
            width="80">
          </el-table-column>
          <el-table-column
            prop="month"
            align="center"
            fixed
            label="年月"
            width="120">
          </el-table-column>
          <el-table-column
            prop="payerAccount"
            fixed
            width="120"
            label="发电户号">
          </el-table-column>
          <el-table-column
            prop="payerName"
            width="120"
            fixed
            label="业主单位">
          </el-table-column>
          <el-table-column
            width="120"
            prop="sourceTypeName"
            label="抄表来源">
          </el-table-column>
          <!-- <el-table-column label="自发自用结算"> -->
            <el-table-column
              prop="sharpValue"
              align="right"
              width="120"
              label="尖电量(kWh)">
            </el-table-column>
            <el-table-column
              prop="sharpAmount"
              width="120"
              align="right"
              label="尖电费(元)">
            </el-table-column>
            <el-table-column
              prop="peakValue"
              width="120"
              align="right"
              label="峰电量(kWh)">
            </el-table-column>
            <el-table-column
              prop="peakAmount"
              width="120"
              align="right"
              label="峰电费(元)">
            </el-table-column>
            <el-table-column
              prop="flatValue"
              width="120"
              align="right"
              label="平电量(kWh)">
            </el-table-column>
            <el-table-column
              prop="flatAmount"
              width="120"
              align="right"
              label="平电费(元)">
            </el-table-column>
            <el-table-column
              prop="valleyValue"
              width="120"
              align="right"
              label="谷电量(kWh)">
            </el-table-column>
            <el-table-column
              prop="valleyAmount"
              width="120"
              align="right"
              label="谷电费(元)">
            </el-table-column>
            <el-table-column
              prop="totalPower"
              width="120"
              align="right"
              label="总电量(kWh)">
            </el-table-column>
            <el-table-column
              prop="totalOldAmount"
              width="120"
              align="right"
              label="总电费(元)">
            </el-table-column>
            <el-table-column
              width="120"
              prop="discount"
              label="折扣率(%)">
            </el-table-column>
            <el-table-column
              prop="afterDiscountAmount"
              width="120"
              label="折后电费">
            </el-table-column>
            <el-table-column
              width="120"
              prop="discountAmount"
              label="企业优惠">
            </el-table-column>
            <el-table-column
              prop="totalAmount"
              width="120"
              label="金额合计">
            </el-table-column>
            <el-table-column
              width="120"
              prop="meterReadingUser"
              label="抄表人">
            </el-table-column>
            <el-table-column
              prop="meterStartDate"
              width="120"
              label="抄表时间">
            </el-table-column>
          <!-- </el-table-column> -->
          <el-table-column
            align="center"
             fixed="right"
            label="操作">
            <template #default="{row}">
              <span>
               <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                 <i @click="looklist(row)" class="el-icon-edit" style="color:#1890ff;cursor: pointer;"></i>
               </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部分页 -->
      <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="20"
                @current-change="gettablelist"
                :total="+totalCount">
              </el-pagination>
        </div>
      <div class="dialog">
        <el-dialog
          title=""
          :visible.sync="dialogVisible"
          width="60%">
          <div>
            <div class=title>
              <div></div>
              <div>{{ rowvalue.name }} {{ rowvalue.dateString }} 光伏电费单</div>
              <div> <el-button type="primary" size="small" @click="exportxiangqing">下载pdf</el-button></div>
            </div>
            <div class="qingqing">
              <div><span class="text">客户名称:</span> <span>{{ rowvalue.name }}</span></div>
              <div><span  class="text">结算日期:</span> <span>{{ rowvalue.settlementDate }}</span></div>
              <div><span  class="text">抄表日期:</span> <span>{{ rowvalue.meterStartDate }} 至 {{ rowvalue.meterEndDate }}</span></div>
            </div>
            <div class="-tab">
              <TableColumn
              :tableData="tableDatas" 
              :tableConfig="tableConfig" >
                <el-table-column
                  prop="name"
                  label="时段">
                </el-table-column>
                <el-table-column
                  prop="dianliang"
                  align="right"
                  label="电量(kWh)">
                  <template #default="{row}">
                    <span>
                      <el-input placeholder="请输入电量(kWh)" v-model="row.dianliang" size="small"></el-input>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="danjia"
                  align="right"
                  label="单价(kWh/元)">
                </el-table-column>
                <el-table-column
                  prop="dianfei"
                  align="right"
                  label="电费(元)">
                </el-table-column>
              </TableColumn>
            </div>
            <el-form ref="form" :model="form" label-width="130px">
              <el-row :gutter="5">
                  <span class="texttit">费用合算</span>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="8">
                    <el-form-item label="折扣率">
                      <el-input placeholder="请输入折扣率" v-model="form.discount" size="small"><span slot="suffix" >%</span></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="折后电费">
                      <el-input placeholder="请输入折后电费" v-model="form.afterDiscountAmount" size="small"><span slot="suffix" >元</span></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="企业优惠">
                      <el-input placeholder="请输入企业优惠" v-model="form.discountAmount" size="small"><span slot="suffix" >元</span></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="8">
                    <el-form-item label="税率">
                      <el-input placeholder="请输入税率" v-model="form.taxRate" size="small"><span slot="suffix" >%</span></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="税额">
                      <el-input placeholder="请输入税额" v-model="form.taxAmount" size="small"><span slot="suffix" >元</span></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="不含税金额">
                      <el-input placeholder="请输入不含税金额" v-model="form.excludingTaxAmount" size="small"><span slot="suffix" >元</span></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="8">
                    <el-form-item label="开票金额">
                      <el-input placeholder="请输入开票金额" v-model="form.invoiceAmount" size="small"><span slot="suffix" >%</span></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="金额合计">
                      <el-input placeholder="请输入金额合计" v-model="form.totalAmount" size="small"><span slot="suffix" >元</span></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="金额大写">
                      <el-input placeholder="请输入金额大写" v-model="form.totalAmountCapitalForm" size="small"><span slot="suffix" >元</span></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <span class="texttit">收款信息</span>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                    <el-form-item label="收款单位账户名称">
                      <el-input placeholder="请输入收款单位账户名称" v-model="form.payeeName" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="付款单位账户名称">
                      <el-input placeholder="请输入付款单位账户名称" v-model="form.payerName" size="small"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                    <el-form-item label="收款单位账号">
                      <el-input placeholder="请输入收款单位账号" v-model="form.payeeAccount" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="付款单位账号">
                      <el-input placeholder="请输入付款单位账号" v-model="form.payerAccount" size="small"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                    <el-form-item label="收款单位开户行">
                      <el-input placeholder="请输入收款单位开户行" v-model="form.payeeBank" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="付款单位开户行">
                      <el-input placeholder="请输入付款单位开户行" v-model="form.payerBank" size="small"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="8">
                    <el-form-item label="联系人">
                      <el-input placeholder="请输入联系人" v-model="form.contacts" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="联系电话">
                      <el-input placeholder="请输入联系电话" v-model="form.contactsMobile" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="联系地址">
                      <el-input placeholder="请输入联系地址" v-model="form.address" size="small"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="quxiao" size="small">取 消</el-button>
            <el-button type="primary" size="small" @click="submit">保存</el-button>
            <el-button type="primary" size="small" @click="shoufei">收电费</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import download from 'downloadjs'
import TableColumn from '@/components/Table/index.vue'
import {getjiesuandanlistapi,exportdianfeidanapi,postjiesuanputapi} from '@/api/Photovoltaic/settlement/LighProfit'
import TopTile from '@/components/TopTitle/index.vue'
import { exportexcel } from '@/utils/excel'
import {getphotovollistapi} from '@/api/Photovoltaic/analysis/YoyAnalysis'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      companyId:'',
      value1: [],
      xitonglist: [],
      tableData:[],
      issize: 'medium',
      name: '',
      loading: false,
      dialogVisible: false,
      rowvalue: {},
      tableDatas: [],
      tableConfig: [],
      form: {},
      pageobj: {
        pageNo: 1,
        pageSize:20,
      },
      totalCount:''
    };
  },

  async mounted() {
    this.gettime()
    const { data: { list } } = await getphotovollistapi()
    this.xitonglist = list
    const PhotoCompanyId = localStorage.getItem('PhotoCompanyId')
    this.$set(this, 'companyId', PhotoCompanyId ? +PhotoCompanyId : list[0].id)
    this.name = this.xitonglist.filter(ele => ele.id == this.companyId)[0].name
    this.gettablelist()
  },

  methods: {
    // 修改
    async submit(){
      this.form['sharpValue']=this.tableDatas[0].dianliang
      this.form['peakValue']=this.tableDatas[1].dianliang
      this.form['flatValue']=this.tableDatas[2].dianliang
      this.form['valleyValue']=this.tableDatas[3].dianliang
      this.form['totalPower']=this.tableDatas[4].dianliang
      const {sharpUnitPrice,sharpAmount,peakUnitPrice,peakAmount,flatUnitPrice,flatAmount,valleyUnitPrice,valleyAmount,selfPowerAmount}=this.rowvalue
      await postjiesuanputapi({
        sharpUnitPrice,sharpAmount,peakUnitPrice,peakAmount,flatUnitPrice,flatAmount,valleyUnitPrice,valleyAmount,selfPowerAmount,meterEndDate:this.rowvalue.meterEndDate,
        ...this.form,stationId:this.rowvalue.stationId,settlementDate:this.rowvalue.settlementDate,meterStartDate:this.rowvalue.meterStartDate
      }).then(res=>{
        this.$message({
          type:res.code=='200'?'success':'warning' ,
          message:res.code=='200'?'修改成功':res.message
        })
      })
      this.quxiao()
      this.gettablelist()
    },
    // 收电费
    async shoufei(){
      await postjiesuanputapi({
        id:this.rowvalue.id,state:this.rowvalue.state
      }).then(res=>{
        this.$message({
          type:res.code=='200'?'success':'warning' ,
          message:res.code=='200'?'操作成功':res.message
        })
      })
      this.quxiao()
      this.gettablelist()
    },
    // 获取表格数据
    async gettablelist() {
      this.loading=true
      const { data: { list } } = await getjiesuandanlistapi({
        pageNo:this.pageobj.pageNo-1,pageSize:this.pageobj.pageSize,
        classId:this.companyId,fromDate:this.value1[0],name:this.name,toDate:this.value1[1]
      })
      this.tableData=list
      this.loading=false
    },
    // 取消
    quxiao(){
      this.dialogVisible = false
      this.form={}
    },
    // 浏览
    looklist(row) {
      this.rowvalue = row
      this.form={...row}
      this.tableDatas = [
        {name:'尖',dianliang:row.sharpValue,danjia:row.sharpUnitPrice,dianfei:row.sharpAmount},
        {name:'峰',dianliang:row.peakValue,danjia:row.peakUnitPrice,dianfei:row.peakAmount},
        {name:'平',dianliang:row.flatValue,danjia:row.flatUnitPrice,dianfei:row.flatAmount},
        {name:'谷',dianliang:row.valleyValue,danjia:row.valleyUnitPrice,dianfei:row.valleyAmount},
        {name:'总',dianliang:row.totalPower,danjia:'',dianfei:row.totalOldAmount},
      ]
      this.dialogVisible=true
    },
    // 下载详情
    async exportxiangqing() {
      axios({
        method: 'POST',
        url: `/biz/pes-microservice-biz/pes/photovoltaic/settlement/statement/details/exportExcel`,
        data:this.rowvalue,
        responseType: 'blob'
      }).then(res => {
        const blob = new Blob([res.data], { type: 'application/pdf'})
        download(blob, `光伏电费单.pdf`)
        })
    },
    // 系统下拉存本地
    changexitong(val) {
      localStorage.setItem('PhotoCompanyId', val)
    },
    // 重置
    chongzhi() { 
      this.gettime()
      const PhotoCompanyId = localStorage.getItem('PhotoCompanyId')
      this.$set(this, 'companyId', PhotoCompanyId ? +PhotoCompanyId : this.xitonglist[0].id)
      this.gettablelist()
    },
         // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('pes-microservice-biz/pes/photovoltaic/settlement/statement/list/exportExcel',{
        classId:this.companyId,fromDate:this.value1[0],name:this.name,toDate:this.value1[1]
      },'光伏结算单')
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.value1=[]
      this.value1.push(year+'-'+'01')
      this.value1.push(year + '-' + month)
    },
  },
};
</script>

<style lang="scss" scoped>
.Calculationbox{
  height: 100%;
  padding: 10px;
    .topdox{
      height: 80px;
      background-color: #fff;
      padding: 20px;
      margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding:20px;
    .title{
      margin-bottom: 10px;
      display:flex;
      justify-content:space-between;
    }
    .table{
      height: 90%;
    }
    .fenye{
      text-align: right;
      margin-top: 10px;
    }
    .dialog{
      .title{
        display: flex;
        justify-content: space-between;
      }
      .-tab{
        margin-bottom: 15px;
      }
      .qingqing{
        div{
          margin-bottom: 15px;
        }
        .text{
          margin-right: 30px;
        }
      }
    }
  }
}
.texttit{
  color: #000;
  font-size: 16px;
  // margin-top: 10px;
}
::v-deep .el-dialog__footer{
  text-align: center;
}
::v-deep .el-dialog__header{
  display: none;
}
::v-deep .el-form-item{
  margin-bottom: 8px;
}
</style>